<template>
  <div v-show="selectedComponent.id" class="attr-list">
    <!-- <GeometricForm /> -->


    <CommonForm :onChange="handleChange" :formData="selectedComponent.style" :formJson="formJson" />

  </div>


</template>

<script >
import { mapState } from "vuex"
import getStyleFormJson from "./style"
import CommonForm from "../../../../common/CommonForm/index2"
import { uploadImg } from "../../../lib/upload"

import EventBus from "../../../EventBus"

export default {
  data() {
    return {
      labelCol: { span: 10 },

    }
  },

  computed:{
    ...mapState("lowCode", {
      selectedComponent: state => state.selectedComponent,
    }),
    formJsonGeometric(){
      return getStyleFormJson("geometric")
    },
    formJson(){
      return getStyleFormJson(this.selectedComponent.id, this.beforeUpload)
    }

  },
  components: {
    // GeometricForm,
    CommonForm
  },
  methods: {
    handleChange(fieldName, value){
      console.log(fieldName, value)
      // const selectedComponent = {
      //   ...this.selectedComponent,

      // }
      this.selectedComponent.style = {
          ...this.selectedComponent.style,
          [fieldName]: value
        }
      this.$store.commit("lowCode/setSelectedComponent", this.selectedComponent)
      EventBus.$emit("setSelectComponentUpdateList", {})
    },
    beforeUpload (file) {
      uploadImg(file, "value", this.selectedComponent.props)
      .then((img)=> {
        this.selectedComponent.style.backgroundImage = img
        EventBus.$emit("setSelectComponentUpdateList", {})
      })
      return false
    },
  },
  mounted(){

  },
  created(){


  }
}
</script>

<style lang="less" scoped>
  @import url(./index.less);
</style>
